<template>
  <div class="footer">
    <ul>
      <router-link to="/home">
        <li>
          <i class="iconfont icon-shouye2"></i>
          <span>首页</span>
        </li></router-link>
      <router-link to="/diet"
        ><li>
          <i class="iconfont icon-yinshi"></i>
          <span>饮食</span>
        </li></router-link>
      <router-link to="/market"
        ><li>
          <i class="iconfont icon-shangcheng"></i>
          <span>商城</span>
        </li></router-link>
      <router-link to="/recuperate">
        <li>
          <i class="iconfont icon-iconcopy"></i>
          <span>调养</span>
        </li></router-link>
      <router-link to="/mine">
        <li>
          <i class="iconfont icon-wode"></i>
          <span>我的</span>
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.iconfont {
  font-size: 0.2rem;
}
ul {
  height: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 0.01rem solid #999;
  position: fixed;
  bottom: 0;
  color: #999;
  background-color: #fff;
}
.router-link-active {
  color: green;
  font-weight: 500;
}
.router-link-active .iconfont {
  color: green;
  font-weight: 700;
}
li {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
</style>